<template>
    <div :class="className" :style="{height: height, width: width}"></div>
</template>

<script lang="ts">
    import echarts, {EChartOption} from "echarts";
    import {Component, Prop, Watch} from "vue-property-decorator";
    import {mixins} from "vue-class-component";
    import ResizeMixin from "@/components/Charts/mixins/resize";

    export interface ILineChartData {
        expectedData: number[];
        actualData: number[];
    }

    @Component({
        name: "LineChart"
    })
    export default class extends mixins(ResizeMixin) {
        @Prop({required: true}) private chartData!: ILineChartData;
        @Prop({default: "chart"}) private className!: string;
        @Prop({default: "100%"}) private width!: string;
        @Prop({default: "350px"}) private height!: string;

        @Watch("chartData", {deep: true})
        private onChartDataChange(value: ILineChartData) {
            this.setOptions(value);
        }

        mounted() {
            console.log("LineChart=====>")
            this.$nextTick(() => {
                this.initChart();
            });
        }

        beforeDestroy() {
            if (!this.chart) {
                return;
            }
            this.chart.dispose();
            this.chart = null;
        }

        private initChart(): void {
            this.chart = echarts.init(this.$el as HTMLDivElement, "macarons");
            this.setOptions(this.chartData);
        }

        private setOptions(chartData: ILineChartData): void {
            if (this.chart) {
                this.chart.setOption({
                    xAxis: {
                        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                        boundaryGap: false,
                        axisTick: {
                            show: false
                        }
                    },
                    grid: {
                        left: 10,
                        right: 10,
                        bottom: 20,
                        top: 30,
                        containLabel: true
                    },
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "cross"
                        },
                        padding: 8
                    },
                    yAxis: {
                        axisTick: {
                            show: false
                        }
                    },
                    legend: {
                        data: ["expected", "actual"]
                    },
                    dataZoom: [
                        {
                            show: true,
                            realtime: true,
                            start: 0,
                            end: 100
                        },
                        {
                            type: 'inside',
                            realtime: true,
                            start: 0,
                            end: 100
                        }
                    ],
                    series: [
                        {
                            name: "expected",
                            itemStyle: {
                                color: "#FF005A",
                                lineStyle: {
                                    color: "#FF005A",
                                    width: 2
                                }
                            },
                            smooth: true,
                            type: "line",
                            data: chartData.expectedData,
                            animationDuration: 2800,
                            animationEasing: "cubicInOut"
                        },
                        {
                            name: "actual",
                            smooth: true,
                            type: "line",
                            itemStyle: {
                                color: "#3888fa",
                                lineStyle: {
                                    color: "#3888fa",
                                    width: 2
                                },
                                areaStyle: {
                                    color: "#f3f8ff"
                                }
                            },
                            data: chartData.actualData,
                            animationDuration: 2800,
                            animationEasing: "quadraticOut"
                        }
                    ]
                } as EChartOption<EChartOption.SeriesLine>);
            }
        }
    }
</script>

<style lang="" scoped>
</style>
